<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <!-- 
        单向绑定：data中的数据可自动渲染到页面中，{{}}, v-text, v-html, v-bind
            使用范围：所有标签或属性
        双向绑定：data中的数据可自动渲染到页面中，同时页面中的数据也可自动存储到data中
            使用范围：可交互式标签（表单元素标签，文本框，单选按钮，复选框，下拉列表...）
            实现 v-model:value="数据名"

        简化
        v-model:value="数据名"  ===>  v-model="数据名"

        v-model是一个语法糖，由多个指令的功能组合的一个新指令
        -->
        <h1>文本框</h1>
        <!-- <p><input type="text" value="你好"></p> -->
        <!-- <p><input type="text" v-bind:value="message"></p> -->
        <!-- <p><input type="text" v-model:value="message"></p> -->
        <p><input type="text" v-model="message"></p>

        <h1>单选按钮</h1>
        <p>
            <label><input type="radio" name="gender" value="1" v-model="genderVal">男性</label>
            <label><input type="radio" name="gender" value="2" v-model="genderVal">女性</label>
        </p>

        <h1>复选框</h1>
        <p>
            <!-- 绑定数据类型是有要求的，数据类型必须为Array数组 -->
            <label><input type="checkbox" name="hobby" value="足球V" v-model="hobbyVal">足球</label>
            <label><input type="checkbox" name="hobby" value="篮球V" v-model="hobbyVal">篮球</label>
            <label><input type="checkbox" name="hobby" value="乒乓球V" v-model="hobbyVal">乒乓球</label>
            <label><input type="checkbox" name="hobby" value="羽毛球V" v-model="hobbyVal">羽毛球</label>
        </p>

        <h1>下拉列表</h1>
        <p>
            <select v-model="deptVal" style="width: 180px; height: 30px;">
                <option value=""></option>
                <option value="a">研发部</option>
                <option value="b">人力资源部</option>
                <option value="c">生产部</option>
                <option value="d">企划部</option>
            </select>
        </p>
        <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    </div>
    <script src="./assets/vue.js"></script>
    <script>
        let vm = new Vue({
            el: '#app',
            data: {
                message: 'hello vuejs',
                genderVal: '2',
                hobbyVal: ['羽毛球V'],
                deptVal: 'b'
            }
        });
    </script>
</body>
</html>